<template>
  <div style="height: 40px"></div>
  <div class="calculator-main" id="calculator-main">
    <div style="width: 90%;height: 80%;margin: 2% auto 0 auto">
      <textarea id="input-cal" placeholder="请输入数字" v-model="text"></textarea>
    </div>
  </div>
  <div class="numbers">
    <div class="big-button">
        <input type="button" value="归零" @click="clear">
        <input type="button" value="删除" @click="deleteone">
    </div>
    <div class="small-button">
      <input type="button" value="7" @click="number(7)">
      <input type="button" value="8" @click="number(8)">
      <input type="button" value="9" @click="number(9)">
      <input type="button" value="*" @click="number('*')">
    </div>
    <div class="small-button">
      <input type="button" value="4" @click="number(4)">
      <input type="button" value="5" @click="number(5)">
      <input type="button" value="6" @click="number(6)">
      <input type="button" value="/" @click="number('/')">
    </div>
    <div class="small-button">
      <input type="button" value="1" @click="number(1)">
      <input type="button" value="2" @click="number(2)">
      <input type="button" value="3" @click="number(3)">
      <input type="button" value="-" @click="number('-')">
    </div>
    <div class="small-button">
      <input type="button" value="0" @click="number(0)">
      <input type="button" value="." @click="number('.')">
      <input type="button" value="+" @click="number('+')">
      <input type="button" value="=" @click="calculate">
    </div>
  </div>
</template>

<script>
export default {
  name: "Calculator",
  data(){
    return{
      text: '',
    }
  },
  methods:{
    number(number){
      if(this.text==='0'){
        this.text=''
      }
      this.text+=number
    },
    clear(){
      this.text='0'
    },
    deleteone(){
      if(this.text.length>0)
      this.text=this.text.substring(0,this.text.length-1)
    },
    calculate(){
      this.text=eval(this.text)
    },
  }

}
</script>

<style scoped>
#input-cal{
  height: 100%;
  width: 100%;
  border: none;
  resize: none;
  cursor: pointer;
  outline: none;
  font-size: 30px;
}
input:active{
  opacity: 0.5;
}
*{
  font-weight: bolder;
  font-size: 18px;
}
.calculator-main{
  height: 100px;
  width: 400px;
  margin: auto;
  border: black solid 0px;
}
.big-button{
  height: 50px;
  width: 400px;
  margin: auto;
  display: flex;
}
.big-button input{
  background-color: #e5e4e2;
  margin:5px 2.5% 5px 2.5%;
  flex: 1;
  border: none;
  padding: 0;
  height: 80%;
  width: 40%;
}
.small-button{
  height: 50px;
  width: 400px;
  margin: auto;
  display: flex;
}
.small-button input{
  background-color: #e5e4e2;
  flex: 1;
  border: none;
  margin:5px 2.5% 5px 2.5%;
  padding: 0;
  height: 80%;
  width: 20%;
}
.numbers{
  border: 0px solid black;
  width:400px;
  margin:auto;
}
</style>